<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Book store: Login</title>
<link rel="stylesheet" href="{bstoViewPath}css/screen.css"
	type="text/css" media="screen" title="default" />
<!--  jquery core -->
<script src="{bstoViewPath}js/jquery-1.6.2.min.js"
	type="text/javascript"></script>

<!-- Custom jquery scripts -->
<script src="{bstoViewPath}js/jquery.tablesorter.js" type="text/javascript"></script>
<script src="{bstoViewPath}js/custom_jquery.js" type="text/javascript"></script>
<script type="text/javascript"	src="{bstoViewPath}js/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#login").validate({
    	rules: {
			username: { required: true },
			password: { required: true }
		},
		messages: {
			username: {
				required: "<label style=\"color: red;font-family: Tahoma;font-size: 12px;line-height: 12px;\">Please enter your username.</label>",
			},
			password: {
				required: "<label style=\"color: red;font-family: Tahoma;font-size: 12px;line-height: 12px;\">Please enter your password.</label>",				
			}
		},
    });
  });
</script>

<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
<script src="{bstoViewPath}js/jquery.pngFix.pack.js"
	type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
</script>

</head>
<body id="login-bg">

	<!-- Start: login-holder -->
	<div id="login-holder">

		<!-- start logo -->
		<div id="logo-login">
			<a href="index.php"><img src="{bstoViewPath}images/shared/logo_login.png"
				width="100" height="40" alt="" /> </a>
		</div>
		<!-- end logo -->

		<div class="clear"></div>

		<!--  start loginbox ................................................................................. -->
		<div id="loginbox">

			<!--  start login-inner -->
			<div id="login-inner">
				<form id="login" name="login" action="" method="post">
					<table border="0" cellpadding="0" cellspacing="0">
						<tr>
							<th>Username</th>
							<td><input name='username' type="text" value="user2"
								onfocus="this.value=''" class="login-inp" /></td>

						</tr>
						<tr>
							<th></th>
							<td style="height: 7px;"><div class="userlogin"
									style="color: #FF0000;">{username}</div></td>
						</tr>
						<tr>
							<th>Password</th>
							<td><input name='password' type="password" value="123456"
								onfocus="this.value=''" class="login-inp" /></td>

						</tr>
						<tr>
							<th></th>
							<td style="height: 7px;"><div class="passwordlogin"
									style="color: #FF0000;">{password}</div></td>
						</tr>
						<!--tr>
							<th></th>
							<td valign="top"><input name='rememberme' type="checkbox"
								class="checkbox-size" id="login-check" /><label
								for="login-check">Remember me</label></td>
						</tr-->
						<tr>
							<th></th>
							<td><input type="submit" class="submit-login" value="loginform" />
							</td>
						</tr>
					</table>
				</form>
			</div>
			<!--  end login-inner 
    <div class="clear"></div>
    <a href="" class="forgot-pwd">Forgot Password?</a>
 	</div>-->
			<!--  end loginbox -->

			<!--  start forgotbox ................................................................................... -->
			<div id="forgotbox">
				<div id="forgotbox-text">Please send us your email and we'll reset
					your password.</div>
				<!--  start forgot-inner -->
				<div id="forgot-inner">
					<table border="0" cellpadding="0" cellspacing="0">
						<tr>
							<th>Email address:</th>
							<td><input type="text" value="" class="login-inp" /></td>
						</tr>
						<tr>
							<th></th>
							<td><input type="button" class="submit-login" /></td>
						</tr>
					</table>
				</div>
				<!--  end forgot-inner -->
				<div class="clear"></div>
				<a href="" class="back-login">Back to login</a>
			</div>
			<!--  end forgotbox -->

		</div>
		<!-- End: login-holder -->

</body>
</html>
